<template>
  <div>
    <a-table
        class="scroll-y-table"
        :dataSource="course"
        :scroll="{y: 594}"
        :pagination="{
        total,
        showSizeChanger: true,
        onChange: pageChange
      }"
        :loading="loading"
    >
      <a-table-column :width="100" key="Id" title="编号" data-index="Id">
        <template #default="{index}">
          {{ computedIndex(index) }}
        </template>
      </a-table-column>
      <a-table-column key="name" title="课程名称" data-index="name"/>
      <a-table-column :width="130" key="name" title="课程封面" data-index="img">
        <template #default="{text}">
          <a-image :width="100" :src="filePathTransform(text)"/>
        </template>
      </a-table-column>
      <a-table-column key="name" title="操作" data-index="Id">
        <template #default="{text,record}">
          <a-button type="link" @click="controlCourse(record)">视频管理</a-button>
          <a-divider type="vertical"/>
          <a-button type="link" @click="$emit('upAndDown', text)">
            {{ record.is_show === 1 ? '下架' : '上架' }}
          </a-button>
          <a-divider type="vertical"/>
          <a-button type="link" @click="$emit('edit', record)">编辑</a-button>
          <a-divider type="vertical"/>
          <a-button type="link" @click="$emit('del', text)">删除</a-button>
        </template>
      </a-table-column>
    </a-table>
    <a-modal v-model:visible="showVideoTable" :title="courseInfo.title" width="700px">
      <VideoTable :courseId="courseInfo.id"/>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import {computedNO, filePathTransform} from '@/utils'
import {reactive, ref, watch} from "vue";
import {getCourseApi} from "@/apis/course";
import VideoTable from "@/components/CourseView/VideoTable.vue";

defineEmits<{
  edit: (data: object) => void;
  del: (id: number) => void;
  upAndDown: (id: number) => void;
}>();

const loading = ref(false);

// 表格数据
const course = ref([]);
// 表格分页信息
const pagination = reactive({
  pageSize: 10,
  pageIndex: 1,
})
const total = ref(0);
// 请求列表函数
const getCourse = async () => {
  loading.value = true;
  const {data} = await getCourseApi(pagination);
  course.value = data.data;
  total.value = data.total;
  loading.value = false;
}
// 分页修改
const pageChange = (pageIndex: number, pageSize: number) => {
  Object.assign(pagination, {pageIndex, pageSize});
}
getCourse();
// 监听分页修改
watch([pagination], getCourse);

// 暴露函数
defineExpose({getCourse})

// 计算编号
const computedIndex = (index: number) => computedNO(index, pagination.pageIndex, pagination.pageSize);


// 视频管理
const showVideoTable = ref(false);
const courseInfo = reactive({
  id: 0,
  title: ''
});
const controlCourse = (info:{Id:number;name:string;}) =>{
  courseInfo.id = info.Id;
  courseInfo.title = info.name;
  showVideoTable.value = true;
}

</script>